<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>分类管理</title>
  <style>
    table, th, td {
      border: solid 1px #efefef;
    }
    table {
      width: 100%;
      margin: auto;
      border-collapse: collapse;
      text-align: center;
      border-radius: 6px;
    }
    td,th{
      padding: 10px;
    }
    a {
      text-decoration-line: none;
      color: green;
    }
    a:hover {
      color: brown;
      text-decoration-line: underline;
    }
    tr:first-child {
      background-color: #efefef;
      border-radius: 4px 4px 0 0;
      border-bottom: solid 1px #ddd;
    }
    table caption {
      font-size: 1.5rem;
      font-weight: bolder;
      margin-bottom: 20px;
    }
    p {
      text-align: center;
    }
    /*首页样式*/
    p a:first-child {
      width: 56px;
    }
    p a:last-child {
      width: 56px;
    }
    p a {
      display: inline-block;
      width: 28px;
      height: 24px;
      border: 1px solid green;
      margin-left:2px;
      line-height: 24px;
    }
    /*当前页样式*/
    .active {
      background-color: green;
      color: white;
    }
    .more {
      border: none;
    }

    /*滚动条宽度*/
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    /*滚动条轨道*/
    ::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 2px;
    }
    /*小滑块*/
    ::-webkit-scrollbar-thumb {
      background: rgba(0,155,124,1);
      border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: rgb(62,115,110);
    }
  </style>
<body>
<h3>当前位置：分类管理</h3>
<table class="table table-hover text-center">
  <tbody>
    <tr>
      <th width="10%">ID</th>
      <th width="40%">分类名称</th>
      <th width="30%">更新时间</th>
      <th width="20%">操作</th>
    </tr>
    <tr>
      <td>1</td>
      <td>身体相关</td>
      <td>2022-12-09</td>
      <td><div> <a href=""> 修改</a> <a href=""> 删除</a> </div></td>
    </tr>
    <tr>
      <td>1</td>
      <td>身体相关</td>
      <td>2022-12-09</td>
      <td><div> <a href=""> 修改</a> <a href=""> 删除</a> </div></td>
    </tr>
    <tr>
      <td>1</td>
      <td>身体相关</td>
      <td>2022-12-09</td>
      <td><div> <a href=""> 修改</a> <a href=""> 删除</a> </div></td>
    </tr>
    <tr>
      <td>1</td>
      <td>身体相关</td>
      <td>2022-12-09</td>
      <td><div> <a href=""> 修改</a> <a href=""> 删除</a> </div></td>
    </tr>
    <tr>
      <td>1</td>
      <td>身体相关</td>
      <td>2022-12-09</td>
      <td><div> <a href=""> 修改</a> <a href=""> 删除</a> </div></td>
    </tr>
  </tbody>
</table>
<!--分页-->
<p>
  <a href="">首页</a>
  <a href="" class="active">1</a>
  <a href="">2</a>
  <a href="">3</a>
  <a href="">4</a>
  <a href="" class="more">...</a>
  <a href="">尾页</a>
</p>
</body>
</html>